<template>
    <div class="container">
        <!-- 搜索输入框 -->
        <div class="form">
            <div class="inp">
                <el-input v-model="adminID" placeholder="请输入管理ID" clearable />
            </div>
            <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
        </div>
        <!-- 表格部分 -->
        <div>
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column prop="id" label="日志ID" />
                <el-table-column prop="adminId" label="管理员ID" />
                <el-table-column prop="requestId" label="请求ID" />
                <el-table-column prop="group" label="API分组" />
                <el-table-column prop="gmtCreate" label="操作时间">
                    <template #default="scope">
                        {{ new Date(scope.row.gmtCreate).friendTime(0) }}
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页组件 -->
        <div>
           <Pagetion v-bind="pagetio" @page-change="pageChange"></Pagetion>
        </div>
        <!-- 回到顶部组件 -->
        <div>
            <el-backtop target=".el-main" :right="100" :bottom="100" ref="backTop" :visibility-height="20"/>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { Search, } from '@element-plus/icons-vue'//引入图标
import { ref, reactive ,nextTick} from 'vue'
import { post } from "@/http/request";
import { ElMessage } from 'element-plus';
import { ClassPagination } from "#/index";//分页类型
import "@/utils/DateFormatter";//友好日期封装
import Pagetion from "@/components/pagetion/Pagetion.vue";//分页组件

const pagetio = reactive(new ClassPagination())//分页类型

const tableData = ref([])//接收表格数据
const adminID = ref()//搜索框绑定的值
const backTop = ref()

let params = reactive({//需要传递的参数
    _gp: "admin.log",
    _mt: "list",
    targetAdminId: "",
    page: pagetio.pageNo,
    limit: pagetio.pageSize
})

//初始化数据
const loadInit = () => {
    post(params).then(res => {
        let { errno, errmsg, data } = res
        if (200 == errno) {
            tableData.value = data.items
            pagetio.total = data.total
            nextTick(()=>{
                backTop.value.$el.click?.()
            })
        } else {
            tableData.value = []
            ElMessage.error(errmsg)
        }
    })
}
loadInit()

// 搜索
const handleSearch = () => {
    params.targetAdminId = adminID.value
    post(params).then(res => {
        let { errno, errmsg} = res
        if (200 == errno) {
            loadInit()
        } else {
            tableData.value = []
            ElMessage.error(errmsg)
        }
    })
}

// 分页组件子传父自定义事件
const pageChange = (e:TypePage)=>{
    params.page = e._pageNo
    params.limit = e._pageSize
    loadInit()
}
</script>

<style lang="less" scoped>                                                                                                                                                                                                                                                                                                                                                                   
</style>